<template>
  <div>
    <button @click="locale = 'zh'">中午</button>
    <button @click="locale = 'en'">English</button>

    <h1>
      {{ t('helloWorld') }}
      <br>
      {{ t('greeting') }}
      <br>
      {{ t('cart') }}
    </h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1.当前地区语言设置
      locale: 'zh',
      // 2.字典，对象里面的每个属性都是一门语音的字典
      messages: {
        // 每个语言的字典里面都是Key:value的方式指定 标记:对应的翻译语句
        zh: {
          helloWorld: '芜湖',
          greeting: '金轮',
          cart: '我是世界第一盖伦'
        },
        en: {
          helloWorld: 'wuhu',
          greeting: 'Cakra',
          cart: 'Im the number one Galen in the world'
        }
      }
    }
  },
  methods: {
    // 3.翻译函数，输入一个语音标识 自动根据当前的设置，返回翻译语句
    t(str) {
      // 找字典
      const dist = this.messages[this.locale]
      // 差语句
      return dist[str]
    }
  }
}
</script>

<style>

</style>
